import React from 'react';
import { Carousel, WingBlank, Flex } from 'antd-mobile';
import './index.scss';
import axios from 'axios';
import nav1 from '../../assets/images/nav-1.png';
import nav2 from '../../assets/images/nav-2.png';
import nav3 from '../../assets/images/nav-3.png';
import nav4 from '../../assets/images/nav-4.png';
import { getLocalCity } from '../../utils/localCity';


export default class Index extends React.Component {
  state = {
    swiperList: [],
    groupList: [],
    newsList: [],
    localCity: '北京'
  }

  navs = [{
    id: 0,
    img: nav1,
    title: '整租',
    path: '/home/houselist'
  }, {
    id: 1,
    img: nav2,
    title: '合租',
    path: '/home/houselist'
  }, {
    id: 2,
    img: nav3,
    title: '地图找房',
    path: '/map'
  }, {
    id: 3,
    img: nav4,
    title: '去出租',
    path: '/home/houselist'
  }]

  componentDidMount() {
    this.getSwiperList()
    this.getGroupList()
    this.getNewsList()
    this.getLocalCity()
  }

  getSwiperList = async () => {
    const { data } = await axios.get(`http://127.0.0.1:8080/home/swiper`)

    if (data.status !== 200) {
      return alert(data.description)
    }

    this.setState({
      swiperList: data.body
    })
  }

  getGroupList = async () => {
    const { data } = await axios.get(`http://127.0.0.1:8080/home/groups?area=AREA%7C88cff55c-aaa4-e2e0`)

    if (data.status !== 200) {
      return alert(data.description)
    }

    this.setState({
      groupList: data.body
    })
  }

  getNewsList = async () => {
    const { data } = await axios.get(`http://127.0.0.1:8080/home/news?area=AREA%7C88cff55c-aaa4-e2e0`)

    if (data.status !== 200) {
      return alert(data.description)
    }

    this.setState({
      newsList: data.body
    })
  }

  getLocalCity = async () => {
    const res = await getLocalCity();

    this.setState({ localCity: res.label });
  }

  renderSwiper = () => {
    if (this.state.swiperList.length === 0) {
      return <div style={{ height: 212, backgroundColor: '#ccc' }}></div>
    }

    return (
      <div className="swiperBox">
        <Carousel
          autoplay={true}
          infinite={true}
          autoplayInterval={3000}
        >
          {this.state.swiperList.map(val => (
            <a
              key={val.id}
              href="http://www.itcast.cn"
              style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
              <img
                src={`http://127.0.0.1:8080${val.imgSrc}`}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
              />
            </a>
          ))}
        </Carousel>

        <Flex className='search-box'>
          {/* 左侧白色区域 */}
          <Flex className="search">
            {/* 位置 */}
            <div className="location" onClick={() => this.props.history.push('/citylist')}>
              <span className="name">{this.state.localCity}</span>
              <i className="iconfont icon-arrow" />
            </div>

            {/* 搜索表单 */}
            <div className="form">
              <i className="iconfont icon-seach" />
              <span className="text">请输入小区或地址</span>
            </div>
          </Flex>
          {/* 右侧地图图标 */}
          <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />
        </Flex>
      </div>

    )
  }

  renderNavs = () => {
    return (
      <div className="navs-box">
        {this.navs.map(item => {
          return (<div className="navs-item" key={item.id} onClick={() => this.props.history.push(item.path)}>
            <img src={item.img} alt="" />
            <div>{item.title}</div>
          </div>)
        })}
      </div>
    )
  }

  renderGroupList = () => {
    return (
      <div className="groupBox">
        <div className="groupTitle">
          <h3>租房小组</h3>
          <span>更多</span>
        </div>

        <div className="groupItemBox">
          {this.state.groupList.map(item => {
            return (<div className="groupItem" key={item.id}>
              <div className="groupItemLeft">
                <div className="groupItemLeftTitle">{item.title}</div>
                <div className="groupItemLeftDesc">{item.desc}</div>
              </div>
              <img className="groupItemRight" src={`http://127.0.0.1:8080${item.imgSrc}`} alt="" />
            </div>)
          })}
        </div>
      </div>
    )
  }

  renderNewsList = () => {
    return (
      <div className="news">
        <h3 className="group-title">最新资讯</h3>
        <WingBlank size="md">
          {this.state.newsList.map(item => {
            return (
              <div className="news-item" key={item.id}>
                <div className="imgwrap">
                  <img
                    className="img"
                    src={`http://localhost:8080${item.imgSrc}`}
                    alt=""
                  />
                </div>
                <Flex className="content" direction="column" justify="between">
                  <h3 className="title">{item.title}</h3>
                  <Flex className="info" justify="between">
                    <span>{item.from}</span>
                    <span>{item.date}</span>
                  </Flex>
                </Flex>
              </div>
            )
          })}
        </WingBlank>
      </div>
    )
  }

  render() {
    return (
      <div className="indexBox">
        {this.renderSwiper()}

        {this.renderNavs()}

        {this.renderGroupList()}

        {this.renderNewsList()}
      </div>
    );
  }
}